<template>
  <ElDrawer v-model="drawer" :title="currowRow.name + '详情'" size="1200">
    <ElRow>
      <ElCol :span="20">
        <Search
          :schema="allSchemas.searchSchema"
          @search="setSearchParams"
          @reset="setSearchParams"
        />
      </ElCol>

      <ElCol :span="4">
        <ElButton style="margin-bottom: 18px" type="danger" @click="delData(null)"
          >批量删除</ElButton
        >
      </ElCol>
    </ElRow>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :pagination="{
        total: total
      }"
      showAction
      @register="tableRegister"
      @refresh="refresh"
    />
  </ElDrawer>
  <EditVideoModel ref="editVideoModel" />
</template>

<script lang="tsx" setup>
import { Search } from '@/components/Search'
import { useTable } from '@/hooks/web/useTable'
import EditVideoModel from '@/views/StudyPlan/videoPlan/components/editVideoModel.vue'
import {
  delBatchPlStudyPlanVideo,
  delBatchPlStudyPlanVideoType,
  getPlStudyPlanVideoPageListApi,
  getVideoAddPageListApi
} from '@/api/studyPlan/video'
import { reactive, unref, ref } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { videoTypeListApi } from '@/api/resLibrary/video'

import {
  ElDialog,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElDrawer,
  ElCol,
  ElRow,
  ElTabPane,
  ElButton
} from 'element-plus'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
const drawer = ref(false)
const direction = ref('rtl')

const editVideoModel = ref()
const { tableRegister, tableState, tableMethods } = useTable({
  immediate: false,
  fetchDataApi: async () => {
    console.log(searchParams.value, 'search')
    const res = await getPlStudyPlanVideoPageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      sortField: 'sort_num',
      sortRule: 'asc',
      studyPlanVideoTypeId: currowRow.value.id,
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  },

  fetchDelApi: async () => {
    let boo = false
    const a = {}
    a['idsList'] = ids.value
    const res = await delBatchPlStudyPlanVideo(a)
    if (res.code == '00000') {
      boo = true
    }
    return boo
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose, delList } = tableMethods
const columns = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    }
  },
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'fileName',
    headerAlign: 'center',
    align: 'center',
    label: '名称',
    width: '200'
  },
  {
    field: 'videoTime',
    label: '时长(秒)',
    width: '60',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'thumbnailTime',
    label: '缩略图(帧)',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'startPlayTime',
    label: '片头时长',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'status',
    label: '状态',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',

    slots: {
      default: (data: any) => {
        return (
          <ElTag
            type={data.row.status === 2 ? 'success' : data.row.status === 1 ? 'warning' : 'danger'}
          >
            {data.row.status === 2 ? '学习完成' : data.row.status === 1 ? '学习中' : '未学习'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'sortNum',
    label: '排序',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'watchNum',
    label: '观看次数',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'dayNum',
    label: '每日次数',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'action',
    align: 'center',
    headerAlign: 'center',
    label: '操作',
    width: '140',
    search: { hidden: true },
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElButton type="danger" style="padding:0px" text onClick={() => delData(data.row)}>
              删除
            </ElButton>
            <ElButton
              type="primary"
              style="padding:0px"
              text
              onClick={() => showVideoEditModel(data.row)}
            >
              编辑
            </ElButton>
          </>
        )
      }
    }
  }
])

const delLoading = ref(false)
const ids = ref<string[]>([])
const delData = async (row) => {
  console.log(row, 'row')
  const elTableExpose = await getElTableExpose()
  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v) => v.id) || []
  delLoading.value = true
  console.log(row, 'row')
  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
}
const currowRow = ref({})
const searchParams = ref({})
const { allSchemas } = useCrudSchemas(columns)
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const isShowDrawer = (row) => {
  currowRow.value = row
  drawer.value = true
  getList()
}

const showVideoEditModel = (row) => {
  editVideoModel.value.isShowModel(row)
}
defineExpose({ isShowDrawer })
</script>
